<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>11_商品列表练习</title>
</head>
<body>
<table border="1px">
  <tr>
    <th>商品名称</th>
    <th>商品价格</th>
    <th>商品数量</th>
  </tr>
</table>

<script>
  //定义数组用来模拟从后端请求回来的商品数据
  let productArr=[
    {title:'小米手机',price:'5000',count:'100'},
    {title:'华为手机',price:'6000',count:'200'},
    {title:'苹果手机',price:'7000',count:'300'},
    {title:'三星手机',price:'8000',count:'400'},
    {title:'OPPO手机',price:'9000',count:'500'}
  ]
  //先获取用来显示商品列表的table元素
  let tableE=document.querySelector('table');
  //遍历商品数组，每遍历到一件商品，表格就多一行
  for (let i=0;i<productArr.length;i++){
    let trE=document.createElement('tr');
    let titleTd=document.createElement("td")
    let priceTd=document.createElement("td")
    let numTd=document.createElement("td")
    //给单元格赋值
    titleTd.innerHTML=productArr[i].title;
    priceTd.innerHTML=productArr[i].price;
    numTd.innerHTML=productArr[i].count;
    trE.append(titleTd,priceTd,numTd);
    tableE.append(trE);
  }
</script>
</body>
</html>